{extend name="index_layout"/}
{block name="main"}
<div class="top-container">
    <div class="top-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i> 数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>用户统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">{$sys_info.user}</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>插件统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">{$sys_info.addon}</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>日志统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">{$sys_info.log}</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>管理员统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">{$sys_info.admin}</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i> 快捷入口
                                <button class="pull-right quick-btn layui-btn layui-btn-primary layui-btn-xs" data-open="{:url('system.rule/quick')}" title="添加快捷入口"><i class="layui-icon layui-icon-addition layui-red"></i></button>
                            </div>

                            <div class="layui-card-body">
                                <div class="welcome-module layui-carousel top-carousel" id="qiuck">
                                    <div class="layui-row layui-col-space10" carousel-item>
                                        <ul class="grid quick-link layui-row top-qiuck">
                                            {volist name="quickList" id="vo"}
                                            <li class="layui-col-xs3">
                                                <div class="top-qiuck-module">
                                                    <a href="javascript:;" top-content-href="/{$vo.href}.html" data-title="{$vo.title}" data-icon="iconfont {$vo.icon}">
                                                        <i class="iconfont {$vo.icon}" style="color: {$vo.color}"></i><cite>{$vo.title}</cite>
                                                    </a>
                                                </div>
                                            </li>
                                            {if $i%8==0}
                                           </ul>
                                           <ul class="grid quick-link layui-row top-qiuck">
                                            {/if}
                                            {/volist}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i> 报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:528px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i> 系统公告</div>
                    <div class="layui-card-body">
                        <div class="welcome-module layui-carousel top-carousel" id="notice">
                            <div class="layui-row layui-col-space10" carousel-item>
                                <ul class="grid quick-link layui-row top-qiuck">
                                    {volist name="notice" id="vo"}
                                    <div class="top-notice">
                                        <div class="top-notice-title" style="color:{$vo.color}">{$vo.title}</div>
                                        <div class="top-notice-extra">{$vo.create_time}</div>
                                        <div class="top-notice-content layui-hide">
                                            {$vo.description}
                                        </div>
                                    </div>
                                    {if $i%5==0}
                                </ul>
                                <ul class="grid quick-link layui-row top-qiuck">
                                    {/if}
                                    {/volist}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i> 版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="120">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>框架名称</td>
                                <td>
                                    {:config('site_name')}
                                </td>
                            </tr>

                            <tr>
                                <td>当前版本</td>
                                <td>{:config('site_version')}
                                </td>
                            </tr>
                            <tr>
                                <td>服务器环境</td>
                                <td>
                                    {$config.server_soft}
                                </td>
                            </tr>
                            <tr>
                                <td>PHP 版本</td>
                                <td class="phpv">{$config.php_version}</td>
                            </tr>
                            <tr>
                                <td>最大上传</td>
                                <td class="server">{$config.max_upload_size}</td>
                            </tr>
                            <tr>
                                <td>Gitee</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                        <a href="https://gitee.com/vipbuy/TopAdmin" target="_blank" style="margin-right: 15px"><img src="https://gitee.com/vipbuy/TopAdmin/badge/star.svg?theme=dark" alt="star"></a>
                                        <a href="https://gitee.com/vipbuy/TopAdmin" target="_blank"><img src="https://gitee.com/vipbuy/TopAdmin/badge/fork.svg?theme=dark" alt="fork"></a>
                                    </div>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i> 作者心语 <i class="pull-right layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i></div>
                    <div class="layui-card-body layui-text layadmin-text">
                        <p>TopAdmin是基于最新的thinkphp6(tp6)，layui2.5.7开发的极速后台开发框架，集成了权限管理，配置管理、日志管理、附件管理、会员管理、和插件管理，大道至简，功能插件化开发，本人十多年网建经历、会长期开发和维护本框架、欢迎大家使用并共同维护！</p>
<!--                        <p>TopAdmin地址：<a class="layui-btn layui-btn-xs layui-btn-danger" target="_blank" href="">TopAdmin文档</a></p>-->
                        <p>技术交流QQ群（712780220）：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=50xtSLNs2Fdcr3-y95HWzFegEBEIZwge&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="TopAdmin" title="TopAdmin"></a></a></p>
                        <p>喜欢此极速后台开发框架的可以在Gitee加个Star支持一下</p>
                        <p class="layui-red">备注：此极速开发框架永久开源并长期更新，您可以进行二次开发，用于企业或个人项目中</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use(['layer', 'topTab','echarts','carousel'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            topTab = layui.topTab,
            carousel = layui.carousel,
            echarts = layui.echarts;

        topTab.listen();

        carousel.render({
            elem: '#qiuck'
            ,width: '100%' //设置容器宽度
            ,arrow: 'none' //始终显示箭头
            ,autoplay: false
            //,anim: 'updown' //切换动画方式
        });

        carousel.render({
            elem: '#notice'
            ,width: '100%' //设置容器宽度
            ,arrow: 'none' //始终显示箭头
            ,autoplay: false
            //,anim: 'updown' //切换动画方式
        });

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.top-notice', function () {
            var title = $(this).children('.top-notice-title').text(),
                noticeTime = $(this).children('.top-notice-extra').text(),
                content = $(this).children('.top-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
                area: '400px;',
                shade: 0.8,
                id: 'top-notice',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content:html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'https://www.topadmin.cn/',
                        target: '_blank'
                    });
                }
            });
        });

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'邮件营销',
                    type:'line',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        echartsRecords.setOption(optionRecords);

        // echarts 窗口缩放自适应
        window.onresize = function(){
            echartsRecords.resize();
        }

    });
</script>
{/block}